<script setup lang="ts">
let containerRef = ref()

function addFn () {
  if(containerRef.value) {
    let newItem = document.createElement("div");
    newItem.classList.add("item");
    containerRef.value.appendChild(newItem)
  }
}

function subtractFn () {
  if(containerRef.value) {
    let childElementCount = containerRef.value.childElementCount
    if(childElementCount > 1) {
      containerRef.value.removeChild(containerRef.value.children[childElementCount - 1])
    }
  }
}

</script>

<template>
<div class="wrap">
  <section>
    <div ref="containerRef" class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </section>
  <div class="form">
    <div class="controle">
      <div class="button" @click="addFn">
        <svg t="1621567639573" class="button__icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8088" width="200" height="200">
          <path d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" p-id="8089"></path>
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8090"></path>
        </svg>
      </div>
      <div class="button" id="subtract" @click="subtractFn">
        <svg t="1621567672920" class="button__icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8222" width="200" height="200">
          <path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" p-id="8223"></path>
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8224"></path>
        </svg>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  --color-primary: #3740ff;
  --color-primary-dark: #272eb5;
  --color-primary-light: #3740ff;
  --color-primary-x-light: #e8f0fe;
  --color-light: #ffffff;
  --color-dark: #202124;
  --color-off-white: #f3f4f4;
  --color-mid: #5f6368;
  --color-mid-dark: #3c4043;
  --color-stroke: #dadce0;
  --metric-gutter: 1.5rem;
  --metric-box-spacing: 1rem;
  --metric-radius: 3px;
  --generic-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
  0px 2px 6px 2px rgba(60, 64, 67, 0.15);
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;
  gap: 2rem;

  section {
    width: 1000px;
    margin: 0 auto;

    display: flex;
    box-shadow: 0 0 0 6px rgb(217 210 10 / 9%);
    border-radius: 4px;

    .container {
      --width: 100%;

      display: grid;
      gap: 1rem;
      // 显式设置表格项目尺寸
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      // 设置隐式表格的齿唇
      grid-auto-columns: 150px;
      grid-auto-rows: 150px;
      // 控制布局算法
      grid-auto-flow: dense;

      width: var(--width);
      padding: 1rem;

      outline: 1px dashed #f36;
      counter-reset: item;

      ::v-deep(.item){
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2c6;
        color: #000;
        position: relative;

        &:before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }

        &:nth-child(1) {
          background-color: #bbd7af;
        }
        &:nth-child(2) {
          background-color: #dac2f1;
        }
        &:nth-child(3) {
          background-color: #ccf1c2;
        }
        &:nth-child(4) {
          background-color: #c2e9f1;
        }
        &:nth-child(5) {
          background-color: #9f10ae;
        }
        &:nth-child(6) {
          background-color: #f44336;
        }
        &:nth-child(7) {
          background-color: #2196f3;
        }
        &:nth-child(8) {
          background-color: #f196f3;
        }


      }
    }
  }

  .form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;

    .controle {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;

      .button {
        --background: #275efe;
        --rectangle: #184fee;
        --success: #4672f1;
        --text: #fff;
        --arrow: #fff;
        --checkmark: #fff;
        --shadow: rgba(10, 22, 50, 0.24);

        display: flex;
        background: var(--background);
        border-radius: 50%;
        box-shadow: 0 2px 8px -1px var(--shadow);
        color: var(--text);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: none 0;
        width: 44px;
        aspect-ratio: 1 / 1;
        cursor: pointer;

        &#subtract {
          --background: #242836;
          --rectangle: #1c212e;
          --arrow: #f5f9ff;
          --text: #f5f9ff;
          --success: #2f3545;
        }

        &:hover {
          transform: scale(0.95);
          box-shadow: 0 1px 4px -1px var(--shadow);
        }

        .button__icon {
          fill: var(--text);
          width: 100%;
          height: auto;
        }

      }
    }
  }

}
</style>
